<template>
    <div class="solution">
        <div class="solution-top">
            <div class="solution-top-l">
                <div class="solution-top-l-title wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.4s">
                    牛视3.0
                </div>
                <div class="solution-top-l-setails wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.8s">
                    为优秀操盘手倾力打造
                </div>
                <div class="solution-top-l-consulting wow bounceInLeft flex_start" data-wow-delay=".3s" data-wow-duration="1.2s">
                    <vs-button @click="openInfoDialog" style="background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                    font-size: 18px;
                    padding: 6px 0;
                    width: 170px;
                    ">
                        咨询了解 <img style="margin-left:4px" src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        <template #animate>
                            <img v-preloadImg="'https://static.pdwl.net/jituan/images/zixun.png'" src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        </template>
                    </vs-button>
                    <!-- <div @click="nsDownload" class="flex_cen"> 下载牛视3.0（windows版） <i style="margin: 0 0 -3px -2px;" class="iconfont icon-yunduanxiazai" ></i></div> -->
                    <el-dropdown @command="nsDownload" class="solution-el-dropdown-menu" placement="bottom">
                        <span class="el-dropdown-link" style="display: block;width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-around;">
                            下载牛视3.0客户端<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item,idx) in downLink" :key="idx" :command="idx" style="width: 12.95rem;display: flex;justify-content: space-between;font-size:1rem;padding:.34rem .2rem;">{{item.name}}<i class="iconfont icon-yunduanxiazai"></i></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="solution-content">
            <div class="solution-content-advantages">
                <div class="solution-content-advantages-head ">
                    <div class="solution-content-advantages-head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">产品核心优势</div>
                    <div class="solution-content-advantages-head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">当短视频营销成为趋势，当产品源于市场需求，一切都将蓄势待发</div>
                </div>
                <div class="solution-content-advantages-list flex_start flex_wrap">
                    <div class="solution-content-advantages-list-item " v-for="(item, idx) of advantagesList" :key="idx">
                        <div class="wow" :class="[0, 1, 4, 5].includes(idx) ? 'fadeInLeft' : 'fadeInRight'"
                            data-wow-delay=".3s" data-wow-duration=".4s">
                            <div class="solution-content-advantages-list-item-img">
                                <img v-preloadImg="item.icon" :src="item.icon" alt="" srcset="">
                            </div>
                            <div class="solution-content-advantages-list-item-title">
                                {{ item.title }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="solution-content-acquisition">
                <div class="solution-content-acquisition-head">
                    <div class="solution-content-acquisition-head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">专注短视频营销获客</div>
                    <div class="solution-content-acquisition-head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">全链路流程化，彻底解放短视频操盘手</div>
                </div>
                <!-- 01 -->
                <div class="solution-content-acquisition-data solution-content-acquisition-dataBg">
                    <div class="flex_start solution-content-acquisition-data-title">
                        <div class="wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.4s">01</div>
                        <div class="wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.8s">多平台多账号矩阵管理</div>
                    </div>
                    <div class="flex_bet solution-content-acquisition-data-content">
                        <div class="solution-content-acquisition-data-content-list">
                            <div class="acquisition-content">
                                <div>多平台绑定发布</div>
                                <div>支持绑定多平台账号，矩阵式账号管理发布</div>
                            </div>
                            <div class="acquisition-content">
                                <div>SEO关键词布局</div>
                                <div>支持自定义核心词、范围词、长尾词，提升视频搜索排名</div>
                            </div>
                            <div class="acquisition-content">
                                <div>经营工具挂载</div>
                                <div>支持位置、小程序和商品营销，满足多重客户需求</div>
                            </div>
                        </div>
                        <div class="solution-content-acquisition-data-content-img">
                            <img v-preloadImg="'https://static.pdwl.net/jituan/images/solution/icon15.png'" src="https://static.pdwl.net/jituan/images/solution/icon20.png" alt="" srcset="">
                        </div>
                    </div>
                    <div class="solution-content-acquisition-data-pain">
                        <div class="flex_start solution-content-acquisition-data-pain-head">
                            <img v-preloadImg="'https://static.pdwl.net/jituan/images/icon13.png'" src="https://static.pdwl.net/jituan/images/icon13.png" alt="" srcset="">
                            <div class="solution-content-acquisition-data-pain-head-text">
                                <div>解决痛点</div>
                                <div></div>
                            </div>
                        </div>
                        <div class="flex_start solution-content-acquisition-data-pain-list">
                            <div class="solution-content-acquisition-data-pain-list-item" v-for="(item, idx) of painList"
                                :key="idx">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 02 -->
                <div class="solution-content-acquisition-data solution-content-acquisition-data-r solution-content-acquisition-dataBg1">
                    <div class="flex_end solution-content-acquisition-data-r-title">
                        <div class="wow bounceInRight" data-wow-delay=".3s" data-wow-duration="0.4s">多模式AI创作，规模化生产提效</div>
                        <div class="wow bounceInRight" data-wow-delay=".3s" data-wow-duration="0.8s">02</div>
                    </div>
                    <div class="flex_start solution-content-acquisition-data-content">
                        <div class="solution-content-acquisition-data-content-img">
                            <img src="https://static.pdwl.net/jituan/images/solution/icon21.png" alt="" srcset="">
                        </div>
                        <div class="solution-content-acquisition-data-content-list">
                            <div class="acquisition-content">
                                <div>AI智能单剪</div>
                                <div>AI智能文案撰写+智能成片</div>
                            </div>
                            <div class="acquisition-content">
                                <div>AI智能混剪</div>
                                <div>智能精准进行视频混剪</div>
                            </div>
                            <div class="acquisition-content">
                                <div>商业模块快剪</div>
                                <div>精选优质模板快速剪辑成片</div>
                            </div>
                            <div class="acquisition-content">
                                <div>数字人播报</div>
                                <div>数字人视频播报剪辑制作</div>
                            </div>
                        </div>

                    </div>
                    <div class="solution-content-acquisition-data-pain" style="margin-top:55px">
                        <div class="flex_end solution-content-acquisition-data-pain-head">
                            <div class="solution-content-acquisition-data-pain-head-text">
                                <div>解决痛点</div>
                                <div></div>
                            </div>
                            <img style="margin-left:10px" src="https://static.pdwl.net/jituan/images/icon13.png" alt="" srcset="">
                        </div>
                        <div class="flex_end solution-content-acquisition-data-pain-list" style="margin-right:50px">
                            <div class="solution-content-acquisition-data-pain-list-item" v-for="(item, idx) of painList1"
                                :key="idx">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 03 -->
                <div class="solution-content-acquisition-data solution-content-acquisition-data3">
                    <div class="flex_start solution-content-acquisition-data-title">
                        <div class="wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.4s">03</div>
                        <div class="wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.8s">一键批量发布，提升发布效率</div>
                    </div>
                    <div class="flex_start solution-content-acquisition-data-content">
                        <div class="solution-content-acquisition-data-content-list">
                            <div class="acquisition-content">
                                <div>多平台一键发布</div>
                                <div>多平台多账号一键发布，支持视频、图文发布</div>
                            </div>
                            <div class="acquisition-content">
                                <div>智能定时发布</div>
                                <div>预先设定好什么时间发多少数量的什么内容，无需每天上线，发布更自由</div>
                            </div>
                            <div class="acquisition-content">
                                <div>多维度智能设置</div>
                                <div>发布时智能生成封面，结合SEO智能生成标题、话题、重点区域和工具挂载多元化营销</div>
                            </div>
                            <div class="acquisition-content">
                                <div>经营工具挂载</div>
                                <div>支持位置、小程序和商品营销，满足多重客户需求</div>
                            </div>
                        </div>
                        <div class="solution-content-acquisition-data-content-img">
                            <img src="https://static.pdwl.net/jituan/images/solution/icon15.png" alt="" srcset="">
                        </div>
                    </div>
                    <div class="solution-content-acquisition-data-pain">
                        <div class="flex_start solution-content-acquisition-data-pain-head">
                            <img src="https://static.pdwl.net/jituan/images/icon13.png" alt="" srcset="">
                            <div class="solution-content-acquisition-data-pain-head-text">
                                <div>解决痛点</div>
                                <div></div>
                            </div>
                        </div>
                        <div class="flex_start solution-content-acquisition-data-pain-list">
                            <div class="solution-content-acquisition-data-pain-list-item" v-for="(item, idx) of painList2"
                                :key="idx">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 04 -->
                <div
                    class="solution-content-acquisition-data solution-content-acquisition-data-r solution-content-acquisition-data-r1">
                    <div class="flex_end solution-content-acquisition-data-r-title">
                        <div class="wow bounceInRight" data-wow-delay=".3s" data-wow-duration="0.4s">数据聚合管理，提升运营效率</div>
                        <div class="wow bounceInRight" data-wow-delay=".3s" data-wow-duration="0.8s">04</div>
                    </div>
                    <div class="flex_start solution-content-acquisition-data-content">
                        <div class="solution-content-acquisition-data-content-img">
                            <img src="https://static.pdwl.net/jituan/images/solution/icon22.png" alt="" srcset="">
                        </div>
                        <div class="solution-content-acquisition-data-content-list">
                            <div class="acquisition-content">
                                <div>运营数据总览</div>
                                <div>企业号和员工号运营数据明细查看、报表导出</div>
                            </div>
                            <div class="acquisition-content">
                                <div>智能询盘报表</div>
                                <div>一键智能生成运营大盘，让询盘数据管理更加便捷</div>
                            </div>
                            <div class="acquisition-content">
                                <div>作品数据管理</div>
                                <div>快捷查看作品数据概况，评论聚合批量管理，支持自动化回复</div>
                            </div>
                            <div class="acquisition-content">
                                <div>视频CRM</div>
                                <div>内置抖音CRM系统，无需切换登录账号可实现多个账户在线私信回复</div>
                            </div>
                        </div>

                    </div>
                    <div class="solution-content-acquisition-data-pain">
                        <div class="flex_end solution-content-acquisition-data-pain-head">
                            <div class="solution-content-acquisition-data-pain-head-text">
                                <div>解决痛点</div>
                                <div></div>
                            </div>
                            <img style="margin-left:10px" src="https://static.pdwl.net/jituan/images/icon13.png" alt="" srcset="">
                        </div>
                        <div class="flex_end solution-content-acquisition-data-pain-list" style="margin-right:50px">
                            <div class="solution-content-acquisition-data-pain-list-item" v-for="(item, idx) of painList4"
                                :key="idx">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="solution-content-applicable">
                <div class="solution-content-applicable-head ">
                    <div class="solution-content-applicable-head-title wow fadeInUp" data-wow-delay=".3s"
                        data-wow-duration="0.4s">你的企业，值得拥有</div>
                    <div class="solution-content-applicable-head-details wow fadeInUp" data-wow-delay=".3s"
                        data-wow-duration="0.8s">助力传统企业数智化转型升级，打破常规，抓住机会</div>
                </div>
                <div class="solution-content-applicable-swiper flex_cen flex_wrap">
                    <div class="applicable-swiper-slide" v-for="(item, idx) of applicableList" :key="idx"
                    :class="{'applicable-swiper-slide-active':idx == applicableListIdx}"
                    @mouseover="onApplicableListIdxEnter(idx)"
                    @mouseout ="onApplicableListIdxLeave(idx)"
                    >
                        <img :src="item.img" alt="">
                        <div>{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div >
            <Footer></Footer>
        </div>
        <InfoDialog ref="infoDialog"></InfoDialog>
    </div>
</template>
<script>
import 'animate.css'
import  InfoDialog from '@/components/infoDialog'
import  Footer from '@/components/footer/index.vue'
export default {
    components:{Footer,InfoDialog},
    data() {
        return {
            advantagesList: [
                {
                    icon: 'https://static.pdwl.net/jituan/images/index/icon1.png',
                    bg: 'https://static.pdwl.net/jituan/images/icon5.png',
                    title: '账号矩阵管理',
                },
                {
                    icon: 'https://static.pdwl.net/jituan/images/index/icon2.png',
                    bg: 'https://static.pdwl.net/jituan/images/icon5.png',
                    title: '热门文案创作',
                },
                {
                    icon: 'https://static.pdwl.net/jituan/images/index/icon3.png',
                    bg: 'https://static.pdwl.net/jituan/images/icon5.png',
                    title: '视频智能分析',
                },
                {
                    icon: 'https://static.pdwl.net/jituan/images/index/icon4.png',
                    bg: 'https://static.pdwl.net/jituan/images/icon5.png',
                    title: '多平台发布',
                },
                {
                    icon: 'https://static.pdwl.net/jituan/images/index/icon7.png',
                    bg: 'https://static.pdwl.net/jituan/images/icon5.png',
                    title: '关键词优化',
                },
                {
                    icon: 'https://static.pdwl.net/jituan/images/index/icon6.png',
                    bg: 'https://static.pdwl.net/jituan/images/icon5.png',
                    title: '视频定时智能发布',
                },
                {
                    icon: 'https://static.pdwl.net/jituan/images/index/icon8.png',
                    bg: 'https://static.pdwl.net/jituan/images/icon5.png',
                    title: '意向客户实时推送',
                },
                {
                    icon: 'https://static.pdwl.net/jituan/images/index/icon5.png',
                    bg: 'https://static.pdwl.net/jituan/images/icon5.png',
                    title: '克隆数字人播报',
                }
            ],
            painList: [
                '多账户登录与管理较繁琐',
                '意向客户管理难',
                '搜索排名难优化',
                '多元化营销需求',
            ],
            painList1: [
                '文案创作难不知道写什么',
                '无专业拍摄剪辑团队和经验',
                '素材资源管理散乱难调用',
                '批量剪辑耗时耗力',
                '视频播放量低难上热门',
            ],
            painList2: [
                '多平台账号发布效率低',
                '大批量作品发布耗时耗力',
                '作品发布状态不可视，发布任务难管理',
            ],
            painList4: [
                '运营数据分布散乱，查看麻烦',
                '评论、留言无法统一管理',
                '回复不及时，易丢失意向客户',
            ],
            applicableList: [
                {
                    img: 'https://static.pdwl.net/jituan/images/solution/icon18.png',
                    name: '传统制造行业'
                },
                {
                    img: 'https://static.pdwl.net/jituan/images/solution/icon6.png',
                    name: '会销/培训企业'
                },
                {
                    img: 'https://static.pdwl.net/jituan/images/solution/icon2.png',
                    name: '机械设备/五金企业'
                },
                {
                    img: 'https://static.pdwl.net/jituan/images/solution/icon3.png',
                    name: '建材家装/水暖电工'
                },
                {
                    img: 'https://static.pdwl.net/jituan/images/solution/icon4.png',
                    name: '美业/衣服鞋包'
                },
                {
                    img: 'https://static.pdwl.net/jituan/images/solution/icon5.png',
                    name: '食品生鲜/日用百货'
                },
                {
                    img: 'https://static.pdwl.net/jituan/images/solution/icon1.png',
                    name: '通讯/文教/安防'
                },
            ],
            applicableListIdx:0,
            applicableListTime: null,
            contactList:[],
            contactLoading: false,
            downLink:[
                {name:"Windows版",url:"https://static.pdwl.net/niushi3.0/niushi.exe"},
                {name:"Mac-intel",url:"https://static.pdwl.net/niushi3.0/niushi.dmg"},
                {name:"Mac-arm",url:"https://static.pdwl.net/niushi3.0/niushi-M.zip"},
            ]
        }
    },
    beforeCreate(){
        let imgs = [
            "https://static.pdwl.net/jituan/images/icon15.png",
            "https://static.pdwl.net/jituan/images/icon5.png",
            "https://static.pdwl.net/jituan/images/solution/icon10.png",
            "https://static.pdwl.net/jituan/images/solution/icon9.png",
            "https://static.pdwl.net/jituan/images/solution/icon17.png",
            "https://static.pdwl.net/jituan/images/solution/icon19.png",
            "https://static.pdwl.net/jituan/images/solution/icon11.png",
            "https://static.pdwl.net/jituan/images/solution/icon10.png",
            "https://static.pdwl.net/jituan/images/solution/icon10.png",
            "https://static.pdwl.net/jituan/images/solution/icon18.png",
            "https://static.pdwl.net/jituan/images/solution/icon6.png",
            "https://static.pdwl.net/jituan/images/solution/icon2.png",
            "https://static.pdwl.net/jituan/images/solution/icon3.png",
            "https://static.pdwl.net/jituan/images/solution/icon4.png",
            "https://static.pdwl.net/jituan/images/solution/icon5.png",
            "https://static.pdwl.net/jituan/images/solution/icon1.png",
            "https://static.pdwl.net/jituan/images/solution/icon20.png",
            "https://static.pdwl.net/jituan/images/solution/icon21.png",
            "https://static.pdwl.net/jituan/images/solution/icon22.png",
            "https://static.pdwl.net/jituan/images/index/icon1.png",
            "https://static.pdwl.net/jituan/images/index/icon2.png",
            "https://static.pdwl.net/jituan/images/index/icon3.png",
            "https://static.pdwl.net/jituan/images/index/icon4.png",
            "https://static.pdwl.net/jituan/images/index/icon7.png",
            "https://static.pdwl.net/jituan/images/index/icon6.png",
            "https://static.pdwl.net/jituan/images/index/icon8.png",
            "https://static.pdwl.net/jituan/images/icon13.png",
        ]
        imgs.forEach((item)=>{
            let img = new Image();
            img.src = item;
            img.onload = function(){}
        })
    },
    mounted() {
        var wow = new this.$WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true,
            scrollContainer: null
        })
        wow.init();
        this.initApplicableListIdx()
    },
    methods: {
        nsDownload(idx){
            window.open(this.downLink[idx].url)
        },
        openInfoDialog(){
            this.$refs.infoDialog.openInfoDialog()
        },
        onApplicableListIdxEnter(idx){
            clearInterval(this.applicableListTime)
            this.applicableListIdx = idx 
        },  
        onApplicableListIdxLeave(){
            this.initApplicableListIdx()
        },
        initApplicableListIdx(){
            this.applicableListTime = setInterval(()=>{
                if(this.applicableListIdx == (this.applicableList.length - 1)) this.applicableListIdx = 0
                else this.applicableListIdx +=1
            },1500)
        },
        initSwiper() {
            new Swiper('.swiper-container', {
                // loop: true,
                // // 如果需要分页器
                // pagination: '.swiper-pagination',
                // // 如果需要前进后退按钮
                // nextButton: '.swiper-button-next',
                // prevButton: '.swiper-button-prev',
                // // 如果需要滚动条
                // // scrollbar: '.swiper-scrollbar',
                // //如果需要自动切换海报
                autoplay: {
                    delay: 1000,//时间 毫秒
                    disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
                },
                slidesPerView: 6,
                spaceBetween: 0,
                centeredSlides: false,
                loop: true,
                grabCursor: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            })
        },
        //一键提交
		contactFormSubmit() {
			this.$refs.contactForm.validate(async (valid) => {
				if (valid) {
					this.contactLoading = true;
					try {
						let res = await MaterialSetGroupMaterial(
							this.contactForm
						);
						if (res.code == 1) {
							this.$toastr.success(res.msg);
							this.contactLoading = false;
						}
						this.contactLoading = false;
					} catch (error) {
						this.contactLoading = false;
					}
				}
			});
		},
    }
}
</script>
<style lang="scss" scoped>
.solution {
    .solution-top {
        background-image: url('https://static.pdwl.net/jituan/images/icon15.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        height: 720px;
        width: 100%;
        position: relative;

        &-l {
            position: absolute;
            left: 17%;
            top: 200px;

            &-title {
                font-size: 80px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
            }

            &-setails {
                font-size: 48px;
                font-family: Microsoft YaHei-Light, Microsoft YaHei;
                font-weight: 300;
                color: #FFFFFF;
                line-height: 16px;
                letter-spacing: 4px;
                margin-top: 40px;
            }

            &-consulting {
                margin-top: 80px;
                div {
                    border: 1px solid;
                    border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1;
                    font-size: 14px;
                    background: #ffffff1a;
                    font-weight: 400;
                    color: #FFFFFF;
                    width: 220px;
                    height: 46px;
                    text-align: center;
                    cursor: pointer;
                    transition: all .3s;
                    margin-left: 30px;
                    &:hover {
                        transform: translateY(-2px);
                    }
                }
            }
        }
    }

    .solution-content {
        width: 100%;

        &-advantages {
            height: 720px;
            width: 100%;
            &-head {
                margin-top: 80px;
                text-align: center;
                width: 100%;

                &-title {
                    font-size: 52px;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28px;
                }

                &-details {
                    font-size: 17px;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 28px;
                    margin-top: 25px;
                }

            }

            &-list {
                width: 70%;
                margin: 0 auto;

                &-item {
                    width: 25%;
                    border-radius: 4px;
                    text-align: center;
                    margin-top: 60px;
                    cursor: pointer;

                    &:hover {
                        animation: imgName 1s linear 1;
                    }

                    &-img {
                        background-image: url('https://static.pdwl.net/jituan/images/icon5.png');
                        background-repeat: no-repeat;
                        background-size: 100%;
                        margin-right: 90px;
                        width: 200px;
                        height: 129px;
                        margin: 0 auto;
                        position: relative;
                        display: flex;
                        justify-content: center;

                        @keyframes imgName {
                            0% {
                                transform: scale(1);
                            }

                            50% {
                                transform: scale(1.2);
                            }

                            100% {
                                transform: scale(1);
                            }
                        }

                        ;

                        img {
                            width: 62px;
                            height: 74px;
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                            bottom: 12px;

                        }
                    }

                    &-title {
                        font-size: 20px;
                        font-weight: 400;
                        color: #FFFFFF;
                        margin-top: 20px;
                        line-height: 28px;
                    }
                }

            }
        }

        &-acquisition {
            text-align: center;
            width: 100%;

            &-head {
                margin-bottom: 80px;

                &-title {
                    font-size: 52px;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28px;
                }

                &-details {
                    font-size: 17px;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 28px;
                    margin-top: 25px;
                }
            }

            &-data {
                width: 70%;
                margin: 0 auto;
                &-title {
                    position: relative;
                    font-weight: bold;
                    font-size: 40px;

                    div:first-child {
                        color: #1178FF;
                        margin-right: 15px;
                        z-index: 2;
                    }

                    div:last-child {
                        background: linear-gradient(90deg, #1178FF 0%, #1178FF 30%, #62DEA6 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        z-index: 2;
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        right: 0;
                        width: 83%;
                        top: 13px;
                        height: 48px;
                        background-image: url('https://static.pdwl.net/jituan/images/solution/icon10.png');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100% 100%;
                        z-index: 1;

                    }
                }

                &-content {
                    width: 100%;
                    margin: 50px 0 40px;
                    height: 100%;

                    &-list {
                        width: calc(100% - 604px - 4%);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 350px;

                        .acquisition-content {
                            color: #FFFFFF;
                            text-align: left;
                            cursor: pointer;
                            padding: 10px 0 10px 2%;
                            transition: transform .3s;

                            div:first-child {
                                font-size: 22px;
                                font-weight: bold;
                            }

                            div:last-child {
                                font-size: 14px;
                                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                                font-weight: 400;
                                line-height: 34px;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                display: -moz-box;
                                -moz-line-clamp: 2;
                                -moz-box-orient: vertical;
                                overflow-wrap: break-word;
                                word-break: break-all;
                                white-space: normal;
                                overflow: hidden;
                            }

                            &:hover {
                                background: linear-gradient(90deg, #1178FF 0%, #000000 100%);
                                transform: scale(1.005);
                                border-radius: 1px;
                            }
                        }
                    }

                    &-img {
                        width: 604px;
                        height: 350px;
                        margin-left: 1%;
                        align-self: center;

                        img {
                            width: 100%;
                            height: 100%;
                            background-size: 100% 100%;
                        }
                    }
                }

                &-pain {
                    margin-bottom: 80px;

                    &-head {
                        margin-bottom: 20px;

                        img {
                            width: 44px;
                            height: 42px;
                            align-self: start;
                            background-size: 100% 100%;
                        }

                        &-text {
                            z-index: 2;
                            width: 100px;
                            position: relative;
                            margin-left: 5px;
                            font-weight: bold;

                            div:first-child {
                                background: linear-gradient(180deg, #FFFFFF 0%, #81FFFF 100%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                font-size: 24px;
                                z-index: 10;
                                z-index: 10;
                                font-weight: bold;
                                position: relative;
                            }

                            div:last-child {
                                position: absolute;
                                width: 100%;
                                height: 10px;
                                left: -2px;
                                z-index: 3;
                                bottom: -2px;
                                background-image: url('https://static.pdwl.net/jituan/images/icon9.png');

                            }
                        }
                    }

                    &-list {
                        margin-left: 42px;

                        &-item {
                            font-size: 14px;
                            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 28px;
                            margin-right: 20px;
                            padding: 4px 10px;
                            border-radius: 4px;
                            border: 1px solid #FFFFFF;
                            cursor: pointer;
                            transition:transform .3s ;

                            &:last-child {
                                margin-right: 0px;
                            }
                            &:hover{
                                transform: translateY(-5px);
                            }
                        }
                    }
                }
            }
            .solution-content-acquisition-dataBg{
                background-image: url('https://static.pdwl.net/jituan/images/solution/icon9.png');
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
                // height: 720px;
                // width: 70%;
            }
            .solution-content-acquisition-dataBg1{
                background-image: url('https://static.pdwl.net/jituan/images/solution/icon17.png');
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
            }
            .solution-content-acquisition-data-r1{
                background-image: url('https://static.pdwl.net/jituan/images/solution/icon19.png');
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
            }
            &-data-r {
                &:first-child {
                    background-image: url('https://static.pdwl.net/jituan/images/icon15.png');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 100% 100%;
                    height: 720px;
                    width: 70%;
                }

                &-title {
                    position: relative;
                    font-weight: bold;
                    font-size: 40px;

                    div:last-child {
                        margin-right: 15px;
                        color: #62DEA6;
                        z-index: 2;
                    }

                    div:first-child {
                        background: linear-gradient(90deg, #1178FF 0%, #1178FF 30%, #62DEA6 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        z-index: 2;
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        width: 69%;
                        top: 13px;
                        height: 48px;
                        background-image: url('https://static.pdwl.net/jituan/images/solution/icon11.png') !important;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100% 100%;
                        z-index: 1;

                    }
                }

                .acquisition-content {
                    text-align: right;
                    padding: 10px 2% 10px 0;

                    &:hover {
                        background: linear-gradient(90deg, #000000 0%, #1178FF 100%);
                        transform: scale(1.005);
                        border-radius: 1px;
                    }
                }
            }

            &-data3 {
                .solution-content-acquisition-data-title {
                    &::after {
                        content: "";
                        position: absolute;
                        right: 0;
                        width: 71%;
                        top: 13px;
                        height: 48px;
                        background-image: url('https://static.pdwl.net/jituan/images/solution/icon10.png');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100% 100%;
                        z-index: 1;

                    }
                }
            }

            &-data-r1 {
                .solution-content-acquisition-data-r-title {
                    &::after {
                        content: "";
                        position: absolute;
                        right: 0;
                        width: 73%;
                        top: 13px;
                        height: 48px;
                        background-image: url('https://static.pdwl.net/jituan/images/solution/icon10.png');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100% 100%;
                        z-index: 1;

                    }
                }
            }

        }
        &-applicable{
            text-align: center;
            width: 100%;
            &-head {
                margin-bottom: 80px;
                &-title {
                    font-size: 52px;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28px;
                }

                &-details {
                    font-size: 17px;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 28px;
                    margin-top: 25px;
                }
            }
            &-swiper{
                margin: 0 auto;
                .applicable-swiper-slide{
                    opacity: 0.5;
                    text-align: left;
                    margin: 0 -35px;
                    cursor: pointer;
                    img{
                        width: 218px;
                        height:480px;
                        background-size: 100% 100%;

                    }
                    div{
                        font-size: 18px;
                            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                            font-weight: bold;
                            color: #FFFFFF;
                            line-height: 34px;
                            margin-top: 20px;
                    }
                }
                .applicable-swiper-slide-active{
                    opacity: 1;

                    img{
                        width: 310px;
                        height:480px;
                        background-size: 100% 100%;
                        transform: rotate(-3.8deg);
                        margin: 8px -20px 0;
                    }
                    div{
                        transform: translateX(20px);
                    }
                }
            }
        }
    }
    
}</style>
<style lang="scss">
.el-popper[x-placement^='top'] .popper__arrow {
    border-bottom-color: #ebeef5 !important;
  }
  .el-popper[x-placement^='top'] .popper__arrow::after {
    background-color: #ffffff;
    border-bottom-color: #ffffff !important;
  }
</style>
